<template>
  <el-form  v-model="form" label-width="80px" style="width: 500px;margin: 0 auto ">
    <el-form-item>
      <h1>员工列表综合练习</h1>
    </el-form-item>
    <el-form-item label="姓名" >
      <el-input v-model="p.name" placeholder="请输入姓名" ></el-input>
    </el-form-item>
    <el-form-item label="工资">
      <el-input v-model="p.salary" placeholder="请输入工资"></el-input>
    </el-form-item>
    <el-form-item label="岗位">
      <el-input v-model="p.job" placeholder="请输入岗位"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="submit()">点我提交</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="pList" style="width: 500px;margin: 0 auto">
<!--    <el-table-column type="index" label="编号" width="100px"></el-table-column>-->
<!--    <el-table-column prop="name" label="姓名"></el-table-column>-->
<!--    <el-table-column prop="salary" label="工资"></el-table-column>-->
<!--    <el-table-column prop="job" label="岗位"></el-table-column>-->
<!--循环写法   -->
    <el-table-column v-for="col in LabelList" v-bind="col"></el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import {ref} from "vue";

const p=ref({
  name:'',
  salary:'',
  job:''
});
//let pList=[{name:'张三',salary:5000,job:'销售员'}];
const pList=ref([]);
const submit=()=>{
  // let newP={
  //   name:p.value.name,
  //   salary:p.value.salary,
  //   job:p.value.job
  // };
  // pList.value.push(newP);
  //上面的写法太冗余,下面的简洁写法
  pList.value.push({...p.value});

  console.log(p.value)
  console.log(pList)
  p.value.name='';
  p.value.salary='';
  p.value.job='';
}
const del=(index)=>{
  if(confirm("是否删除"+index)){
    pList.value.splice(index,1)
  }

}

const LabelList=ref([
  {type:'index',label:'编号',width:'100'},
  {label:'姓名',prop:'name'},
  {label:'工资',prop:'salary'},
  {label:'岗位',prop:'job'}
]);
</script>

<style scoped>

</style>